<template>
	<view class="page">
		<view class="doctorInfo">
			<view class="doctor">
				<view class="basicInfo">
					<image style="width: 110rpx;" :src="doctorInfo.avator" mode="widthFix"></image>
					<view class="name_call">
						<view class="name">
							{{doctorInfo.name}}
						</view>
						<view class="call">
							{{doctorInfo.call}}
						</view>
					</view>
				</view>
				<view class="operate">
					<view class="score">
						<image style="width: 32rpx;" src="https://cdn8.axureshop.com/demo/2208121/images/%E5%8C%BB%E7%94%9F%E6%8E%92%E7%8F%AD/u962.svg" mode="widthFix"></image>
						<view class="fraction">
							5.0
						</view>
					</view>
					<uni-fav :checked="follow" bgColorChecked="#e6f4ff" fgColorChecked	="#1677FF"	 :star="false" :content-text="{contentDefault: '关注',contentFav: '已关注'}" class="follow" @click="favClick" />
					<!-- <view class="follow">
						关注
					</view> -->
				</view>
			</view>
			<!-- 科室院区 -->
			<view class="department">
				<view class="depart">
					{{doctorInfo.depart}}
				</view>
				<view class="campus">
					{{campus}}
				</view>
			</view>
			<!-- 擅长 -->
			<view class="skill">
				<text class="good">
					擅长 :  
				</text>肛肠外科（肛肠良性基本），结直肠微创手术，熟悉结直肠肿瘤的外科及多学科综合治疗，主要从事结肠癌和直...
				<text class="more">更多</text>
			</view>
		</view>
		<!-- 医生公告 -->
		<view class="announcement">
			<image style="width: 36rpx;" src="https://cdn8.axureshop.com/demo/2208121/images/%E5%8C%BB%E7%94%9F%E6%8E%92%E7%8F%AD/u902.svg" mode="widthFix"></image>
			<view class="text">
				医生公告
			</view>
			<uni-notice-bar class="noticebar" scrollable single color="#FAAD14" background-color="#FFF"
					text="医生号源每日凌晨1点自动放号，请合理安排挂号时间，谢谢" />
		</view>
		<!-- 排班列表 -->
		<view class="schedulists">
			<view class="title">
				<view class="depart">
					{{doctorInfo.depart}}
				</view>
				<view class="price">
					挂号费：￥{{doctorInfo.price.toFixed(2)}}
				</view>
			</view>
			<view class="schedus">
				<view class="lists" v-for="(item,index) in datelists" :key="index">
					<view class="list">
						<view class="date">
							{{item.year}}-{{item.month<10?'0'+item.month:item.month}}-{{item.day<10?'0'+item.day:item.day}} {{item.weekDay}} 上午
							<text style="color: #36CFC9;margin-left: 10rpx;" v-if="schedulist[index].timeOne+schedulist[index].timeTwo+schedulist[index].timeThree+schedulist[index].timeFour">余{{schedulist[index].timeOne+schedulist[index].timeTwo+schedulist[index].timeThree+schedulist[index].timeFour}}号</text>
							<text style="color: #aaa;margin-left: 10rpx;" v-else>余0号</text>
						</view>
						<view class="other">
							<view class="time">
								{{item.isToday?'今日':item.day-datelists[0].day+'天后'}}
							</view>
							<view class="opeart" v-if="schedulist[index].timeOne+schedulist[index].timeTwo+schedulist[index].timeThree+schedulist[index].timeFour" @click="reservation(index,'上午')">
								预约
							</view>
							<view class="full" v-else>
								已约满
							</view>
						</view>
					</view>
					<view class="list">
						<view class="date">
							{{item.year}}-{{item.month<10?'0'+item.month:item.month}}-{{item.day<10?'0'+item.day:item.day}} {{item.weekDay}} 下午
							<text style="color: #36CFC9;margin-left: 10rpx;" v-if="schedulist[index].timeFive+schedulist[index].timeSix+schedulist[index].timeSeven+schedulist[index].timeEight">余{{schedulist[index].timeFive+schedulist[index].timeSix+schedulist[index].timeSeven+schedulist[index].timeEight}}号</text>
							<text style="color: #aaa;margin-left: 10rpx;" v-else>余0号</text>
						</view>
						<view class="other">
							<view class="time">
								{{item.isToday?'今日':item.day-datelists[0].day+'天后'}}
							</view>
							<view class="opeart" v-if="schedulist[index].timeFive+schedulist[index].timeSix+schedulist[index].timeSeven+schedulist[index].timeEight" @click="reservation(index,'下午')">
								预约
							</view>
							<view class="full" v-else>
								已约满
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="allscedu" @click="allschedu">
				<view class="text">
					{{schedushow?'收起':'全部'}}排班
				</view>
				<image style="width: 36rpx;margin-left: 8rpx;" :class="{rotate:schedushow}" src="https://cdn8.axureshop.com/demo/2208121/images/%E5%8C%BB%E7%94%9F%E6%8E%92%E7%8F%AD/u944.svg" mode="widthFix"></image>
			</view>
		</view>
		<!-- 同科室医生推荐 -->
		<view class="recommend">
			<view class="title">
				同科室有号医生推荐
			</view>
			<view class="doctors">
				<view class="doctor" v-for="(item,index) in recommends" :key="index">
					<image style="width: 90rpx;" :src="item.avator" mode="widthFix"></image>
					<view class="Info">
						<view class="name">
							{{item.name}}
						</view>
						<view class="call">
							{{item.call}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 患者评价 -->
		<view class="evaluation">
			<view class="title">
				患者评价
			</view>
			<view class="evaLists">
				<view class="evaList">
					<view class="lineOne">
						<view class="name">
							黄**
						</view>
						<view class="star">
							<image v-for="n in 5" :key="n" style="width: 32rpx;margin-right: 5rpx;" src="https://cdn8.axureshop.com/demo/2208121/images/%E5%8C%BB%E7%94%9F%E6%8E%92%E7%8F%AD/u990.svg" mode="widthFix"></image>
						</view>
					</view>
					<view class="content">
						医生讲解的很清楚，对我这次的帮助很大；而且服务的态度也相当的好，感谢医生
					</view>
					<view class="time">
						3天前
					</view>
					<image src="https://cdn8.axureshop.com/demo/2208121/images/%E5%8C%BB%E7%94%9F%E6%8E%92%E7%8F%AD/u1007.svg" mode="widthFix"></image>
				</view>
				<view class="evaList">
					<view class="lineOne">
						<view class="name">
							阿*打
						</view>
						<view class="star">
							<image v-for="n in 5" :key="n" style="width: 32rpx;margin-right: 5rpx;" src="https://cdn8.axureshop.com/demo/2208121/images/%E5%8C%BB%E7%94%9F%E6%8E%92%E7%8F%AD/u990.svg" mode="widthFix"></image>
						</view>
					</view>
					<view class="content">
						医生讲解的很清楚，对我这次的帮助很大；而且服务的态度也相当的好，感谢医生
					</view>
					<view class="time">
						2020-01-01
					</view>
					<!-- <image src="https://cdn8.axureshop.com/demo/2208121/images/%E5%8C%BB%E7%94%9F%E6%8E%92%E7%8F%AD/u1007.svg" mode="widthFix"></image> -->
				</view>
			</view>
			<!-- 更多评价 -->
			<view class="more">
				更多评价 >
			</view>
		</view>
	</view>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app'
import api from '../../src/utils/api.js'
import { getWeekDates } from '../../src/utils/date.js'

	const follow = ref(false)
	// 关注
	const favClick = () => {
		follow.value=!follow.value
	}
	//初始生命周期
	const doctorInfo = ref({
		price:100
	})	//医生信息详情
	const recommends = reactive([])	//同科室推荐医生
	const campus = uni.getStorageSync('campus')	//院区信息
	const datelists = reactive([])	//日期渲染列表
	const WeekDates = reactive([])	//日期总列表
	const schedulist = reactive([])	//医生排班情况列表
	onLoad((option)=>{
		WeekDates.push(...getWeekDates())
		// 查询医生具体信息
		api('/doctorinfoApp',{
			doctorID:option.doctorID
		}).then(res=>{
			// console.log(res[0],'医生信息')
			doctorInfo.value=res[0]
			api('/doctorlists',{
				id:res[0].depart_id
			}).then(res=>{
				// console.log(res,'同科室其他医生信息')
				recommends.push(...res)
				// 查询同科室其他医生
			}).catch(err=>{
				console.log(err)
			})
		}).catch(err=>{
			console.log(err)
		})
		// 查询该医生排班情况
		api('/schedutimes',{
			doctorID:option.doctorID
		}).then(res=>{
			// console.log(res,'医生排班情况')
			schedulist.push(...res)
			if(res.length<4){
				datelists.push(...getWeekDates().slice(0,res.length))
			}else{
				datelists.push(...getWeekDates().slice(0,4))
			}
			
		}).catch(err=>{
			console.log(err)
		})
		
	})
	// 全部排班
	const schedushow = ref(false)
	const allschedu = () =>{
		datelists.splice(0,datelists.length)
		if(schedushow.value){
			if(schedulist.length<4){
				datelists.push(...WeekDates.slice(0,schedulist.length))
			}else{
				datelists.push(...getWeekDates().slice(0,4))
			}
		}else{
			datelists.push(...WeekDates.slice(0,schedulist.length))
		}
		schedushow.value=!schedushow.value
	}
	// 预约
	const reservation = (index,farewell) => {
		// console.log('预约',schedulist[index].doctor_id,farewell)
		uni.navigateTo({
			url:'/pages/Confirm_appointment/Confirm_appointment?dateInfo='+index+'&doctorID='+schedulist[index].doctor_id+'&farewell='+farewell
		})
	}
</script>

<style lang="scss" scoped>
	 .page{
		 background-color: rgba(245, 245, 245, 1);
		 min-height: 100vh;
		 .doctorInfo{
			 width: 100%;
			 height: 320rpx;
			 background-color: #fff;
			 padding: 18rpx 40rpx;
			 box-sizing: border-box;
			 .doctor{
				 display: flex;
				 justify-content: space-between;
				 .basicInfo{
					 display: flex;
					 align-items: center;
					 .name_call{
						 font-family: 'Microsoft YaHei UI Bold', 'Microsoft YaHei UI Regular', 'Microsoft YaHei UI', sans-serif;
						 margin-left: 34rpx;
						 .name{
							 font-size: 36rpx;
							 font-weight: 700;
						 }
						 .call{
							 color: #1F1F1F;
							 font-size: 26rpx;
							 margin-top: 8rpx;
						 }
					 }
				 }
				 .operate{
					 height: 40rpx;
					 display: flex;
					 align-items: center;
					 font-family: 'Microsoft YaHei UI', sans-serif;
					 font-size: 26rpx;
					 .score{
						 display: flex;
						 align-items: center;
						 height: 40rpx;
						 .fraction{
							 color: #1677FF;
							 margin-left: 6rpx;
						 }
					 }
					 .follow{
						 width: 92rpx;
						 height: 40rpx;
						 line-height: 40rpx;
						 border-radius: 40rpx;
						 color: #1677FF;
						 background-color: rgba(230, 244, 255, 1);
						 text-align: center;
						 margin-left: 34rpx;
					 }
				 }
			 }
			 .department{
				 display: flex;
				 font-family: 'Microsoft YaHei UI', sans-serif;
				 font-size: 28rpx;
				 color: #1F1F1F;
				 margin-top: 28rpx;
				 .campus{
					 margin-left: 30rpx;
				 }
			 }
			 // 擅长
			 .skill{
				 font-family: 'Microsoft YaHei UI Bold', 'Microsoft YaHei UI Regular', 'Microsoft YaHei UI', sans-serif;
				 font-size: 24rpx;
				 color: #aaa;
				 text-align: justify;
				 line-height: 30rpx;
				 margin-top: 18rpx;
				 .good{
					 color: #000;
					 font-weight: 700;
				 }
				 .more{
					 color: #1677FF;
				 }
			 }
		 }
		 .announcement{
			 width: 100%;
			 height: 96rpx;
			 background-color: #fff;
			 margin: 30rpx 0;
			 display: flex;
			 align-items: center;
			 padding: 0 20rpx;
			 box-sizing: border-box;
			 .text{
				 flex: 0 0 112rpx;
				 font-family: 'Microsoft YaHei UI Oblique', 'Microsoft YaHei UI Regular', 'Microsoft YaHei UI', sans-serif;
				 font-style: oblique;
				 color: #000;
				 font-size: 28rpx;
				 margin-left: 20rpx;
				 margin-right: 20rpx;
			 }
			 .noticebar{
				 // width: 400rpx;
				 margin-bottom: 0 !important;
				 padding: 0 !important;
			 }
		 }
		 // 排班列表
		 .schedulists{
			 // min-height: 656rpx;
			 background-color: #fff;
			 padding: 30rpx 26rpx;
			 box-sizing: border-box;
			 .title{
				 height: 44rpx;
				 display: flex;
				 align-items: baseline;
				 justify-content: space-between;
				 font-family: 'Microsoft YaHei UI Bold', 'Microsoft YaHei UI Regular', 'Microsoft YaHei UI', sans-serif;
				 .depart{
					 font-weight: 700;
					 font-size: 32rpx;
				 }
				 .price{
					 color: #FF4D4F;
					 font-size: 28rpx;
				 }
			 }
			 .schedus{
				 margin-top: 30rpx;
				 .list{
					 height: 48rpx;
					 margin-bottom: 40rpx;
					 display: flex;
					 align-items: center;
					 justify-content: space-between;
					 font-family: 'Microsoft YaHei UI', sans-serif;
					 color: #000;
					 font-size: 28rpx;
					 .scurce{
						 color: #36CFC9;
						 margin-left: 10rpx;
					 }
					 .other{
						 width: 220rpx;
						 display: flex;
						 justify-content: space-between;
						 align-items: center;
						 .time{
							 padding: 4rpx 12rpx;
							 background-color: rgba(240, 240, 240, 1);
							 color: #aaa;
							 border-radius: 4rpx;
						 }
						 .opeart{
							 width: 92rpx;
							 height: 48rpx;
							 background-color: rgba(230, 255, 251, 1);
							 border: 2rpx solid rgba(54, 207, 201, 1);
							 border-radius: 16rpx;
							 font-size: 24rpx;
							 color: #13C2C2;
							 text-align: center;
							 line-height: 48rpx;
						 }
						 .full{
							 width: 92rpx;
							 height: 48rpx;
							 background-color: rgba(242, 242, 242, 1);
							 // border: 2rpx solid rgba(54, 207, 201, 1);
							 border-radius: 16rpx;
							 font-size: 24rpx;
							 color: #aaa;
							 text-align: center;
							 line-height: 48rpx;
						 }
					 }
					 
				 }
			 }
			 .allscedu{
				 margin-top: 60rpx;
				 display: flex;
				 align-items: center;
				 justify-content: center;
				 font-family: 'Microsoft YaHei UI', sans-serif;
				 color: #13C2C2;
				 font-size: 28rpx;
				 .rotate{
					 transform: rotate(180deg);
				 }
			 }
		 }
		 // 同科室医生推荐
		 .recommend{
			 width: 100%;
			 height: 312rpx;
			 background-color: #fff;
			 margin: 30rpx 0;
			 padding: 36rpx 26rpx;
			 box-sizing: border-box;
			 .title{
				 font-family: 'Microsoft YaHei UI Bold', 'Microsoft YaHei UI Regular', 'Microsoft YaHei UI', sans-serif;
				 font-size: 32rpx;
				 font-weight: 700;
				 margin-bottom: 36rpx;
			 }
			 .doctors{
				 padding: 0 26rpx;
				 box-sizing: border-box;
				 display: flex;
				 align-items: center;
				 overflow-x: scroll;
				 .doctor{
					 flex: 0 0 308rpx;
					 width: 308rpx;
					 height: 170rpx;
					 background-image: url('https://cdn8.axureshop.com/demo/2208121/images/%E5%8C%BB%E7%94%9F%E6%8E%92%E7%8F%AD/u969.svg');
					 background-size: cover;
					 display: flex;
					 align-items: center;
					 justify-content: center;
					 .Info{
						 font-family: 'Microsoft YaHei UI Bold', 'Microsoft YaHei UI Regular', 'Microsoft YaHei UI', sans-serif;
						 font-size: 24rpx;
						 color: #7f7f7f;
						 margin-left: 24rpx;
						 .name{
							 width: 140rpx;
							 overflow: hidden;
							 text-overflow: ellipsis;
							 white-space: nowrap;
							 font-size: 32rpx;
							 font-weight: 700;
							 color: #000;
						 }
						 .call{
							 width: 140rpx;
							 overflow: hidden;
							 text-overflow: ellipsis;
							 white-space: nowrap;
							 margin-top: 8rpx;
						 }
					 }
				 }
			 }
		 }
		 // 患者评价
		 .evaluation{
			 width: 100%;
			 height: 660rpx;
			 background-color: #fff;
			 padding: 36rpx 26rpx;
			 box-sizing: border-box;
			 .title{
				 font-family: 'Microsoft YaHei UI Bold', 'Microsoft YaHei UI Regular', 'Microsoft YaHei UI', sans-serif;
				 font-size: 32rpx;
				 font-weight: 700;
				 margin-bottom: 16rpx;
			 }
			 .evaLists{
				 .evaList{
					 margin-top: 40rpx;
					 .lineOne{
						 font-family: 'Microsoft YaHei UI', sans-serif;
						 display: flex;
						 justify-content: space-between;
						 font-size: 28rpx;
						 color: #000;
					 }
					.content{
						font-size: 24rpx;
						color: #555;
						line-height: 32rpx;
						margin-top: 30rpx;
					}
					.time{
						font-size: 24rpx;
						color: #aaa;
						margin-top: 15rpx;
					}
				 }
			 }
			 .more{
				 width: 100%;
				 text-align: center;
				 font-family: 'Microsoft YaHei UI', sans-serif;
				 font-size: 24rpx;
				 color: #1677FF;
				 margin-top: 38rpx;
				 cursor: pointer;
			 }
		 }
	 }      
</style>
